<template>
  <d-result v-if="!hideIcon" class="py-5" icon="info" :title="title" :desc="desc">
    <template #icon>
      <GAnimation name="dataEmpty" width="120px" height="120px" />
    </template>
  </d-result>
  <div v-else class="text-center text-G600 py-20 break-all">
    {{ title }}
  </div>
</template>

<script setup lang="ts">
import GAnimation from '@/components/Animation/index.vue'
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
const props = withDefaults(defineProps<{
    title?: string
    desc?: string
    icon?: string
    hideIcon: boolean
  }>(),
  {
    title: '',
    desc: '',
    hideIcon: true,
  },
)
const title = ref(props.title || t('common.empty'));
</script>

<style lang="scss" scoped>
:deep(.devui-result__extra) {
  margin-top: 0;
}
:deep(.devui-result__title) {
  margin-top: 10px;
  @apply break-all;
}
</style>
